<template>
  <view class="popup-content">
    <view class="popup-title">
      <text>添加群组</text>
      <view class="popup-cancel" @click="closePopup">
        <eui-uicons type="closeempty" size="36" color="#888888" />
      </view>
    </view>
    <view class="popup-default-content">
      <eui-card-input v-model="formatData.groupName" title="群组名称"  h-padding="0" type="text" :focus="true"
                      ref="inputGroupName" placeholder="输入群组名称" maxlength="20" :required="true" :rightIconPlaceholder="true" />
    </view>
    <view class="popup-default-content">
      <eui-card-input v-model="formatData.dutyConfig" title="在岗配置" h-padding="0" type="selector"
                      ref="inputDutyConfig" rightIconType="right" :range="dutyRangeList" placeholder="选择在岗配置"/>
    </view>
    <view class="popup-default-content">
      <eui-card-input v-model="formatData.groupStore" title="所属机构" h-padding="0" type="textname2"
                      :name="getName('rdsStores', formatData.groupStore)" ref="inputGroupStore" rightIconType="right"
                      @iconClick="chooseStore" placeholder="指定所属机构" />

    </view>
<!--    <view class="popup-tips">-->
<!--      <text class="tips-text">-->
<!--        <eui-uicons type="info" size="28" :color="themeColor" style="margin-top: 2rpx" />-->
<!--        {{ message }}-->
<!--      </text>-->
<!--    </view>-->
    <view class="popup-bottom">
      <eui-button title="确认" type="max" maxWidth="440" @buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script setup type="ts">
import { ref, defineProps, watch, defineEmits, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
import { getRelatedName } from "../../components/RelatedName.js";
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const themeColor = ref(theme._object.theme == 'theme-blue' ? '#02B7E6' : '#FF6430')

const message = ref('');
const isButtonDisabled = ref(false); // 按钮是否禁用
const buttonDisableDuration = ref(600); // 按钮禁用时间
const popup = ref(null);

const emit = defineEmits(["clickFunc", "hidePopup", "chooseStore"]);

const props = defineProps({
  /**
   * 内容
   * */
  formatData: {
    type: Object,
    default: {
      groupName: '', // 群组名称
      dutyConfig: '', // 在岗配置
      groupStore: '', // 所属机构
    }
  },
  /**
   * 提示说明
   * */
  msg: {
    type: String,
    default: '说明: 给指定人员派送任务时，需要对方已经上线，并且对方接受任务的指派之后才能开工处理。'
  },
  /**
   * 在岗配置列表
   * */
  dutyRangeList: {
    type: Array,
    default: []
  },
});

const setDefault = (msg) => {
  message.value = msg;
};

watch(
    () => props.msg,
    (newData) => {
      setDefault(newData);
    }
)

onMounted(() => {
  setDefault(props.msg);
});

const closePopup = () => {
  if (isButtonDisabled.value) return;
  isButtonDisabled.value = true;
  emit('hidePopup');
  setTimeout(() => {
    isButtonDisabled.value = false;
  }, buttonDisableDuration.value);
}

const buttonClick = () => {
  if (isButtonDisabled.value) return;
  isButtonDisabled.value = true;
  emit('clickFunc');
  setTimeout(() => {
    isButtonDisabled.value = false;
  }, buttonDisableDuration.value);
}

// 所属机构
const chooseStore = () => {
  emit('chooseStore');
}

const getName = (key, value) => {
  if (!value) {
    return ''
  }
  let list = [];
  value.split(',').map(item => {
    list.push("[" + item + "]" + (getRelatedName(key, item) || key));
  })
  return list.join(',');
}

</script>

<style lang="scss" scoped>
@import '@/main.scss';

.popup-content {
  width: 100%;
  height: 100%;
  background: $uni-bg-color-inverse;
  border-radius: 20rpx;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.popup-title {
  width: 100%;
  height: 85rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: $uni-font-family;
  font-weight: $uni-font-weight-level1;
  color: $uni-text-color-primary;
  font-size: $uni-font-size-level1;
  line-height: 45rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid $uni-line-color;
}
.popup-cancel {
  width: 50rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 16rpx;
}
.popup-default-content {
  width: 602rpx;
  height: 88rpx;
  display: flex;
  box-sizing: border-box;
  margin-left: 28rpx;
  padding-right: 28rpx;
}
.line-view {
  width: 602rpx;
  height: 1rpx;
  margin-left: 28rpx;
  background: $uni-line-color;
  border-radius: 10rpx 10rpx 0 0;
}
.popup-tips {
  width: 574rpx;
  height: 68rpx;
  display: flex;
  font-style: normal;
  margin: 20rpx 28rpx;
  padding: 4rpx 20rpx;
  border-radius: 10rpx;
  background: rgba(1,126,255,0.05);
  flex-direction: row;
  box-sizing: border-box;
  .tips-text {
    font-family: $uni-font-family;
    font-weight: $uni-font-weight-level1;
    color: $uni-text-color-title;
    font-size: $uni-font-size-level7;
    line-height: 30rpx;
  }
}
.popup-bottom {
  width: 100%;
  height: 170rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
